<template>
  <div>
  	<el-breadcrumb separator-class="el-icon-arrow-right">
  		<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  		<el-breadcrumb-item>系统设置</el-breadcrumb-item>
  		<el-breadcrumb-item>导入数据</el-breadcrumb-item>
  	</el-breadcrumb>
  	<el-card class="box-card">
      <el-upload
        class="upload-demo"
        ref="upload"
        :multiple="false"
        accept=".zip"
        :limit="1"
        :headers="headers"
        name="impExcel"
        :action="acitonRar"
        :on-success="handSuccess"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传zip文件，且不超过10M</div>
      </el-upload>
    </el-card>
    <!-- 导入对账表 -->
    <el-card style="margin-top: 20px;">
      <el-table
        :data="impPage.impTableData"
        style="width: 100%">
        <el-table-column
          prop="created_at"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="zfy"
          label="总充值"
          width="180">
        </el-table-column>
        <el-table-column
          prop="syfy"
          label="使用金额">
        </el-table-column>
        <el-table-column
          prop="cha"
          label="余额">
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      	:current-page="impPage.currentPage4" :page-sizes="[10, 20, 30, 50]" :page-size="impPage.pageSize"
      	layout="total, sizes, prev, pager, next, jumper" :total="impPage.total">
      </el-pagination>
    </el-card>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        impPage: {
           currentPage4: 1,
           pageSize: 10,
           total: 10,
           params: {
             limit: 10,
             page: 1
           },
          impTableData: []
        },
        fileList: [],
        acitonRar: '',
        headers: {
          token:''
        }
      };
    },
    created () {
      if (process.env.NODE_ENV == 'development') {
        this.acitonRar = 'http://gm.cn/api/admin/user/imp_ems'
      } else {
        this.acitonRar = 'http://api.kuaidi1231.cn/api/admin/user/imp_ems'
      }
      console.log(process.env.NODE_ENV)
      this.headers.token = window.sessionStorage.getItem('token')

      this.getImpTotalList()
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },
      handSuccess(response, file, fileList) {
        console.log(response, file, fileList);
        if (response.status) return this.$message.error('上传失败')
        this.getImpTotalList()
        return this.$message.success('上传成功')
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },//导入统计列表
      async getImpTotalList() {
        const {
					data: res
				} = await this.$http.get(
            'api/admin/user/get_imp_total_list',{
						params: this.impPage.params
					}
				)
        this.impPage.impTableData = res.data.data
        this.impPage.total = res.data.total
      },
       //每页显示多少条
      handleSizeChange(newSize){
      	console.log(newSize)
      	this.impPage.params.limit = newSize
      	this.getImpTotalList()
      },//第几页
      handleCurrentChange(newPage){
      	console.log(newPage)
      	this.impPage.params.page = newPage
      	this.getImpTotalList()
      },
    }
  }
</script>

<style>
</style>
